<template>
  <template v-for="(item, index) in props.arr" :key="index">
    <!-- 如果item 有children 并且children长度大于0 说明有子菜单 -->
    <!-- 代码子菜单一级目录 -->
    <el-sub-menu
      :index="item.path"
      v-if="item.children && item.children.length > 0"
    >
      <!-- 一级目录title -->
      <template #title>
        <el-icon><component :is="item.icon" /></el-icon>
        <span>{{ item.title }}</span>
      </template>

      <!-- 这个地方是要生成submenu 还是 一个menu -- 判断-item.children.children  -->
      <!-- 如果有就生成sub-menu ，反之就生成menu-item -->
      <MyMenu :arr="item.children"></MyMenu>

      <!--  -->
    </el-sub-menu>

    <!-- 反之说明没有子菜单 -->
    <!-- 一级目录 -->
    <el-menu-item :index="item.path" v-else>
      <el-icon><component :is="item.icon" /></el-icon>
      <span>{{ item.title }}</span>
    </el-menu-item>
  </template>
</template>
<script setup lang="ts">
import { defineProps, defineOptions } from 'vue'

// 递归组件 --组件内部调用自己
// 组件内部给自己起一个名字
//
defineOptions({
  name: 'MyMenu',
})

// 当前组件支持传入arr属性
const props = defineProps(['arr'])
console.log(props.arr)
</script>
